<template>
    <div class="publish-announcement">
      <img src="../assets/image/1.png" style="width: 50px; height: 50px; display: flex; justify-content: left; margin: 20px 20px;">
      <h1 style="text-align: center;">发布公告</h1>
      <el-form :model="form" label-width="80px" class="bd">
        <el-form-item >
          <el-input v-model="form.title" placeholder="请输入公告标题"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="form.content" type="textarea" rows="5" placeholder="请输入公告内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit" class="an">发布</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  const form = ref({
    title: '',
    content: '',
  });
  
  const submit = () => {
    // 这里可以调用 API 发布公告
    console.log('发布公告:', form.value);
    router.push('/main');
  };
  </script>
  
  <style scoped>
  .publish-announcement{
    width: 1510px;
    height: 700px;
    background-image: url("@/assets/image/1.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .bd{
    max-width: 800px;  
    margin: 0 auto;
    padding: 20px;
  }
  </style>